@import 'constants.scss';

body {
  background: #f2f2f2;
}

.main {
  width: 100%;
  margin-top: $navHeight + 20px;

  .wrapper {
    width: $pageWidth;
    margin: 0 auto;
    overflow: hidden;

    .main-content-wrapper {
      float: left;
      width: $mainBoxWidth;
    }
  }
}

.main {
  .wrapper {
    .sidebar-wrapper {
      float: right;
      width: 356px;
      background: #fff;

      .title-group {
        padding: 20px;
        overflow: hidden;
        .title {
          float: left;
          font-size: 18px;
          color: #212121;
        }
        .more {
          float: right;
          font-size: 14px;
          color: $themeColor;
        }
      }
      .advertise-group {
        img {
          width: 100%;
        }
      }

      .focus-group {
        padding: 0 20px;
        overflow: hidden;
        .left-group {
          width: 180px;
          float: left;
          li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: url('https://www.xfz.cn/static/build/images/side-icon.png');
            background-repeat: no-repeat;
            background-size: 26%;
            margin-bottom: 20px;
            overflow: hidden;
            a {
              float: left;
              margin-left: 64px;
              color: #878787;
              font-size: 14px;
            }
          }
          .zhihu {
            background-position: 0 0;
          }
          .weibo {
            background-position: 0 -63px;
          }
          .toutiao {
            background-position: 0 -122px;
          }
        }
        .right-group {
          float: right;
          width: 100px;
          background: url('https://www.xfz.cn/static/build/images/wxQr.jpg');
          background-repeat: no-repeat;
          background-size: 100%;
          .desc {
            margin-top: 100px;
            color: #878787;
            font-size: 12px;
          }
        }
      }

      .hot-news-group {
        .hot-list-group {
          li {
            padding: 0 20px 20px;
            overflow: hidden;
            border-bottom: 1px solid $lineColor;

            .left-group {
              float: left;
              width: 204px;
              height: 72px;
              position: relative;
              .title {
                font-size: 16px;
                a {
                  color: $mainFontColor;
                  &:hover {
                    color: $themeColor;
                  }
                }
              }
              .more {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                font-size: 12px;

                .category {
                  color: $themeColor;
                  float: left;
                }
                .pub-time {
                  float: right;
                  color: $assistFontColor;
                }
              }
            }
            .right-group {
              float: right;
              width: 102px;
              height: 72px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
